<template>
<div class="detail-wrapper">
  <header>
    <h1>{{detail.jobname}}</h1>
    <h2>
      <img class="icon" src="../assets/icon-place.png" alt="">工作地点：{{detail.jobareaname}}
      <img class="icon" src="../assets/icon-date.png" alt="">发布时间：{{detail.issuedate && detail.issuedate.slice(0, 10)}}
    </h2>
  </header>
  <main>
    <div class="content" v-html="detail.jobinfo"></div>
    <div class="btn" @click="$emit('post', detail.jobid)">投递简历</div>
  </main>
  <div class="back" @click="$emit('back')">
    <img src="../assets/icon-back.png" alt="">
    <p>返回列表</p>
  </div>
</div>
</template>

<script>
export default {
  props: {
    jobid: String
  },
  data() {
    return {
      detail: {},
    }
  },
  mounted() {
    coapi.getJobDetail(this.jobid, res => {
      this.detail = res.resultbody;
    })
  }
}
</script>

<style lang="less">
.detail-wrapper {
  margin-top: 50px;
  width: 1200px;
  min-height: 700px;
  background: #FFFFFF;
  padding: 50px 40px;
  position: relative;

  >header {
    padding-bottom: 34px;
    border-bottom: 1px solid #E7E7E7;
    color: #333333;

    >h1 {
      font-size: 24px;
      font-weight: bold;
    }

    >h2 {
      margin-top: 30px;
      display: flex;
      align-items: center;
      font-size: 14px;

      .icon {
        width: 18px;
        margin-right: 10px;

        &:nth-child(n+2) {
          margin-left: 56px;
        }
      }
    }
  }

  >main {
    padding-top: 30px;

    >h1 {
      color: #333;
      font-size: 16px;
    }

    .content {
      margin-top: 18px;
      font-size: 14px;
      color: #666666;
      line-height: 26px;
    }

    .btn {
      width: 140px;
      height: 50px;
      background: #005BAC;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 50px;
      text-align: center;
      margin: 55px auto 0;
      cursor: pointer;
    }
  }

  .back {
    position: absolute;
    text-align: center;
    top: 50px;
    right: 40px;
    font-size: 18px;
    color: #333333;
    cursor: pointer;

    >img {
      width: 44px;
    }

    >p {
      margin-top: 14px;
    }
  }
}
</style>
